<template>
  <div class="edit_profile">
    <hmheader title="编辑个人信息">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #right>
        <van-icon name="wap-home-o" @click="$router.push({ name: 'index' })"
      /></template>
    </hmheader>
    <!-- 头像图片区域 -->
    <div class="imgarea">
      <!-- <img src="@/assets/logo.png" alt="" /> -->
      <img :src="userinfo.head_img" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 昵称 -->
    <hmcell
      title="昵称"
      :desc="userinfo.nickname"
      @click.native="showNicknameDialog"
    ></hmcell>
    <!-- 对话框 -->
    <van-dialog
      v-model="nickshow"
      title="编辑昵称"
      show-cancel-button
      @confirm="editNickname"
    >
      <van-field
        v-model="nickname"
        required
        label="昵称"
        placeholder="请输入昵称"
      />
    </van-dialog>
    <!-- 密码 -->
    <hmcell
      title="密码"
      desc="******"
      @click.native="
        passshow = !passshow;
        originPass = newPass = '';
      "
    ></hmcell>
    <!-- 对话框 -->
    <van-dialog
      v-model="passshow"
      title="修改密码"
      show-cancel-button
      @confirm="editPass"
      :beforeClose="beforeClose"
    >
      <van-field
        v-model="originPass"
        required
        label="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        v-model="newPass"
        required
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <!-- 性别 -->
    <hmcell
      title="性别"
      :desc="userinfo.gender == 1 ? '男' : '女'"
      @click.native="gendershow = !gendershow"
    ></hmcell>
    <van-action-sheet
      v-model="gendershow"
      :actions="actions"
      @select="onSelect"
      :close-on-click-action="true"
    />
  </div>
</template>

<script>
import hmheader from "@/components/hmheader.vue";
import hmcell from "@/components/hmcell.vue";
import { uploadFile } from "@/apis/fileUpload.js";
import { getUserDetail, updateUserInfo } from "@/apis/user.js";
import axios from "@/utils/myaxios.js";
export default {
  components: {
    hmheader,
    hmcell,
  },
  data() {
    return {
      userinfo: {},
      // 绑定昵称弹窗面板
      nickshow: false,
      // 绑定密码弹窗面板
      passshow: false,
      // 绑定性别弹窗面板
      gendershow: false,
      // 昵称所对应的变量
      nickname: "",
      originPass: "", //旧密码
      newPass: "", // 新密码
      // actions 属性是一个由对象构成的数组，数组中的每个对象配置一列
      actions: [{ name: "男" }, { name: "女" }],
    };
  },
  mounted() {
    // 用户信息的动态渲染
    getUserDetail(this.$route.params.id).then((res) => {
      console.log(res);
      this.userinfo = res.data.data;
      this.userinfo.head_img = axios.defaults.baseURL + this.userinfo.head_img;
    });
  },
  methods: {
    // 修改性别
    async onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      console.log(item);
      // 获取的item数据是对象，但是后台需要的是1|0
      let gender = item.name == "男" ? 1 : 0;
      let res = await updateUserInfo(this.$route.params.id, gender);
      // 刷新页面
      this.userinfo.gender = gender;
      this.$toast.success(res.data.message);
      console.log(res);
    },
    // 当文件选择好之后，就会立刻触发在方法，在这个方法中可以实现文件上传
    afterRead(file) {
      // 此时可以自行将文件上传到服务器
      // console.log(file);
      //file.file是用户选择的文件对象
      console.log(file.file);
      // 使用formdata收集图片资源
      let formdata = new FormData();
      formdata.append("file", file.file);
      // 1.上传文件
      uploadFile(formdata)
        .then((res) => {
          if (res.data.message == "文件上传成功") {
            this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url;
            // 2.编辑用户头像
            updateUserInfo(this.$route.params.id, {
              head_img: res.data.data.url,
            })
              .then((res) => {
                if (res.data.message == "修改成功") {
                  this.$toast.success(res.data.message);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑昵称，弹出编辑对话框
    showNicknameDialog() {
      this.nickshow = !this.nickshow;
      this.nickname = this.userinfo.nickname;
    },
    // 编辑昵称--实现昵称的修改
    editNickname() {
      updateUserInfo(this.$route.params.id, { nickname: this.nickname }).then(
        (res) => {
          console.log(res);
          if (res.data.message == "修改成功") {
            this.$toast.success("修改成功");
            // 刷新就是将元素所绑定的数据更新
            this.userinfo.nickname = this.nickname;
          }
        }
      );
    },
    // 编辑密码
    async editPass() {
      // 1、判断用户原密码是否输入正确
      if (this.originPass == this.userinfo.password) {
        // 输对了
        // 2、判断用户新密码是否符合正则规则
        if (/^\S{3,16}$/.test(this.newPass)) {
          // 符合规则
          let res = await updateUserInfo(this.$route.params.id, {
            password: this.newPass,
          });
          console.log(res);
          this.userinfo.password = this.newPass;
          this.$toast.success(res.data.message);
        } else {
          // 不符合规则
          this.$toast.fail("新密码不符合规则，请输入3-16位的新密码");
        }
      } else {
        // 输错了弹出提示框
        this.$toast.fail("原密码输入错误");
      }
    },
    // 编辑密码，组织弹出框关闭
    // action：当前行为 confirm cancel
    beforeClose(action, done) {
      if (action == "confirm") {
        // 如果用户原密码输入不正确，新密码和输入不合法时，阻止关闭
        if (
          this.originPass !== this.userinfo.password ||
          !/^\S{3,16}$/.test(this.newPass)
        ) {
          // 阻止弹窗关闭
          done(false);
        } else {
          done();
        }
      } else {
        done();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.edit_profile {
  .imgarea {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    position: relative;
    > img {
      width: 120px;
      height: 120px;
      display: block;
    }
    // /deep/ 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符，使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作
    /deep/ .van-uploader {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    /deep/ .van-uploader__upload {
      width: 120px;
      height: 120px;
      opacity: 0;
    }
  }
}
</style>